<template>
    <div>
      <div class="M_eader">
        <img @click="bac()" src="../../../assets/img/bwrite.png" alt="">
        <img :src="this.image.length==0?require('../../../assets/img/swiper.png'):image" alt="数据加载失败">
      </div>
      <div class="m_content">
        <img :src="avatar" alt="数据加载失败">
        <h1>{{user_login}}</h1>
        <p>{{signature}}</p>
        <ul>
          <li @click="M_detail(item)" v-for="(item,index) in navData" :key="index">
            <p><span>{{item.t1}}</span><span>{{item.t2}}</span></p>
            <img src="../../../assets/img/line.png" alt="">
          </li>
        </ul>
      </div>
      <div class="m_footer">
        <span>分享</span>
        <span @click="follow()">{{status?'已关注':'关注'}}</span>
      </div>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>
    </div>
</template>

<script>
  import * as search from "../../../api/search.js"
    export default {
      name: "MeNav",
      data(){
        return {
          Fade:'',
          visible:false,
          image:'',
          avatar:'',
          user_login:'',
          signature:'',
          status:0,
          navData:[
            {t1:'简',t2:'介',path:'/mechanism'},
            {t1:'相',t2:'册',path:'/mephoto'},
            {t1:'动',t2:'态',path:'/jiactive'},
            {t1:'视',t2:'频',path:'/mevideo'},
            {t1:'资质',t2:'展示',path:'/zishow'}
            ]
        }
      },
      beforeMount(){
        console.log(this.$route.query.id);
        let params = {user_id:this.$store.state.user_id,uid:this.$route.query.id}
        search.userinfo(params).then(res=>{
          console.log('机构、达人简介',res);
          this.image = res.data.image;
          this.avatar = res.data.avatar;
          this.user_login = res.data.user_login;
          this.signature = res.data.signature;
          this.status = res.data.status
        })
      },
      methods:{
        bac(){
          history.go(-1)
        },
        M_detail(item){
          this.$router.push({
            path:item.path,
            query:{
              id:this.$route.query.id
            }
          })
        },
        follow(){
          if (this.status==0){
            this.status = 1;
            let flow = {follow_id:this.$route.query.id,user_id:this.$store.state.user_id,status:1};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          } else{
            this.status = 0;
            let flow = {follow_id:this.$route.query.id,user_id:this.$store.state.user_id,status:0};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          }
        },
      }
    }
</script>

<style scoped>
 .M_eader{
   position: relative;
   height: 420px;
 }
 .M_eader img:nth-child(1){
   position: absolute;
   left: 40px;
   top: 20px;
   width: 25px;
   height: 40px;
 }
 .M_eader img:nth-child(2){
   width: 100%;
   height: 420px;
 }
 .m_content{
   position: relative;
   background: url("../../../assets/img/backpng.png") no-repeat center/cover;
   width: 100%;
   height: 1150px;
   text-align: center;
 }
  .m_content>img{
    position: absolute;
    left: 50%;
    top: -95px;
    margin-left: -100px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 5px solid #fff;
  }
 .m_content>h1{
   color: #fff;
   font-size: 40px;
   padding-top: 115px;
 }
 .m_content>p{
   color: #fff;
   font-size: 24px;
   padding-top: 40px;
 }
 .m_content ul{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 60px;
 }
 .m_content ul li{
   width: 160px;
 }
 .m_content ul li p{
   display: flex;
   justify-content: space-between;
 }
 .m_content ul li p span{
   color: #fff;
   font-size: 40px;
 }
 .m_content ul li img{
   width: 100%;
 }
  .m_footer{
    width: 100%;
    height: 80px;
    display: flex;
  }
 .m_footer span{
   font-size: 32px;
   background: #d8d8d8;
   width: 50%;
   height: 100%;
   line-height: 80px;
   text-align: center;
   border: 2px solid #dcdcdc;
 }
 .m_footer span:nth-child(2){
   background: #cbcbcc;
 }

 .tran_right{
   width: 220px;
   height: 60px;
   border-radius: 10px;
   text-align: center;
   line-height: 60px;
   font-size: 30px;
   top: 50%;
   left: 50%;
   position: fixed;
   background: rgba(0,0,0,0.6);
   color: #fff;
 }
</style>
